<template>
	<view>
		<u-cell-group :border="false">
			<u-cell-item
				title="统一实名认证"
				:title-style="title"
				label="保障账号与出行安全"
				:label-style="label"
				:value="realAuth"
				:border-top="false"
				@click="this.toPage('/identity/filling/filling?mode=fill')"
			/>
			<u-cell-item
				title="修改手机号"
				:title-style="title"
				label="系统会保护您的通信隐私"
				:label-style="label"
				:value="coverTel"
				@click="updateTelHandle()"
			/>
			<u-cell-item
				title="设置支付密码"
				:title-style="title"
				label="系统会保障您钱包资金的安全"
				:label-style="label"
				@click="setPasswordHandle()"
			/>
			<u-cell-item
				title="设置回家地址"
				:title-style="title"
				label="系统将为你规划合理的回家路线"
				:label-style="label"
				@click="updateHomeHandle()"
			/>
			<u-cell-item
				title="接单设置"
				:title-style="title"
				label="系统将为你推荐符合您要求的订单"
				:label-style="label"
				@click="this.toPage('../settings/settings')"
				v-show="realAuth == '已认证'"
			/>
			<u-cell-item
				title="永久注销账号"
				:title-style="title"
				label="操作后账号信息无法恢复，该微信帐户也无法再次注册"
				:label-style="label"
				@click="disableHandle"
			/>
		</u-cell-group>
		<u-toast ref="uToast" />
		<u-top-tips ref="uTips"></u-top-tips>
		<u-keyboard
			default=""
			ref="uKeyboard"
			mode="number"
			:mask="true"
			:mask-close-able="false"
			:dot-enabled="false"
			v-model="showKeyboard"
			:safe-area-inset-bottom="true"
			:tooltip="false"
			@change="keyboardChangeHandle"
			@backspace="backspaceHandle"
		>
			<view>
				<view class="u-text-right u-padding-30">
					<view class="close" data-flag="false" @tap="showKeyboardHandle(false)">
						<u-icon name="close" color="#333333" size="32"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input
						mode="box"
						:maxlength="6"
						:dot-fill="true"
						v-model="password"
						:disabled-keyboard="true"
						@finish="finish"
					></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">输入随行打车钱包支付密码</view>
			</view>
		</u-keyboard>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-popup v-model="popupVisible" mode="center" border-radius="10" height="370">
			<view style="padding: 20rpx;">
				<form class="form">
				  <view class="form-item">
				    <label class="form-label">新手机号:</label>
				    <input class="form-input" type="tel" v-model="newPhone" placeholder="请输入新手机号" />
				  </view>
				  <view class="form-item">
				    <label class="form-label">验证码:</label>
				    <input class="form-input" type="text" v-model="code" placeholder="请输入验证码" />
				    <button class="btn-code" :disabled="codeDisabled" @click="sendCode">{{codeText}}</button>
				  </view>
				  <button class="btn-confirm" type="submit" @click="submitForm">确认修改</button>
				</form>
			</view>
		</u-popup>
		<u-popup v-model="setPasswordVisible" mode="center" border-radius="10" height="370">
			<view style="padding: 20rpx;">
				<form class="form">
				  <view class="form-item">
				    <label class="form-label">旧密码:</label>
				    <input class="form-input" type="tel" v-model="oldPassword" placeholder="请输入旧密码" />
				  </view>
				  <view class="form-item">
				    <label class="form-label">新密码:</label>
				    <input class="form-input" type="text" v-model="newPassword" placeholder="请输入新密码" />
				  </view>
				  <view class="form-item">
				    <label class="form-label">确认密码:</label>
				    <input class="form-input" type="text" v-model="newPassword2" placeholder="请再次输入新密码" />
				  </view>
				  <button class="btn-confirm" type="submit" @click="submitSetPassword">确认修改</button>
				</form>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
const chooseLocation = requirePlugin('chooseLocation');
export default {
	data() {
		return {
			oldPassword: '',
			newPassword: '',
			newPassword2: '',
			setPasswordVisible: false,
			newPhone: '',
			code: '',
			codeDisabled: false,
			codeText: '获取验证码',
			popupVisible: false,
			title: {
				color: '#444',
				'font-size': '34rpx',
				'font-weight': 'bold'
			},
			label: {
				'font-size': '24rpx',
				color: '#a0a0a0',
				'font-weight': 'normal'
			},
			realAuth: '',
			tel: '',
			coverTel: '',
			showKeyboard: false,
			password: ''
		};
	},
	methods: {
		submitSetPassword(){
			uni.showToast({
				icon:'error',
				title: '暂不支持！'
			});
		},
		disableHandle(){
			uni.showToast({
				icon:'error',
				title: '暂不支持！'
			});
		},
		updateHomeHandle() {
			let that = this;
			let location = uni.getStorageSync('location');
			let latitude = location.latitude;
			let longitude = location.longitude;
			let key = that.tencent.map.key; //使用在腾讯位置服务申请的key
			let referer = that.tencent.map.referer; //调用插件的app的名称
			let data = JSON.stringify({
				latitude: latitude,
				longitude: longitude
			});
			uni.navigateTo({
				url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${data}`
			});
		},
		hidePopup() {
		  this.popupVisible = false
		},
		handleSubmit(formData) {
			// 处理表单提交逻辑
			console.log(formData)
			this.popupVisible = false
		},
		updateTelHandle(){
			this.popupVisible = true;
		},
		setPasswordHandle(){
			this.setPasswordVisible = true;
		},
		submitForm() {
		  // 提交表单逻辑
		  let that = this;
		  let data = {
			phone: that.newPhone,
			smsCode: that.code
		  }
		  this.ajax(that.url.updatePhone, "POST",  data, function(resp){
			  console.log(resp);
			  let result = resp.data;
			  if(result.code == 200 && result.rows == 1) {
				  uni.showToast({
				  	title: '修改成功！'
				  });
			  } else {
				  uni.showToast({
					icon: "none",
					title: result.msg
				  });
			  }
		  })
		},
		sendCode() {
			let that = this;
			if(that.newPhone.length < 11) {
				uni.showToast({
					title: '请输入正确的手机号码!'
				});
			}	
			// 发送验证码逻辑
			let data = {
				"phone": that.newPhone
			}
			this.ajax(that.url.sendSmsCode, "POST",  data, function(resp){
				that.codeDisabled = true
				let count = 60
				const timer = setInterval(() => {
				if (count === 0) {
				  clearInterval(timer)
				  that.codeDisabled = false
				  that.codeText = '获取验证码'
				} else {
				  count--
				  that.codeText = `${count}秒后重试`
				}
				}, 1000)
			})
		}
	
	},
	onLoad: function() {
		
	},
	onShow: function() {
		let that = this;
		uni.getStorage({
			key: "realAuth",
			success(res) {
				that.realAuth = res.data=="2" ? "已认证" : (res.data == "1" ? "未认证":"审核中")
			}
		})
		//选择回家地点
		let location = chooseLocation.getLocation();
		if (location != null) {
			let place = location.name;
			let latitude = location.latitude;
			let longitude = location.longitude;
			let data = {
				"home": JSON.stringify({"place": place,"latitude": latitude,"longitude": longitude})
			};
			//更新storage中缓存数据
			uni.setStorageSync('home', data.home);
			that.ajax(that.url.updateDriverHome, 'POST', data, function(resp) {
				uni.showToast({
					icon: 'none',
					title: '设置回家地址成功!'
				});
			});
		}
	},
	onUnload: function() {
		// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
		chooseLocation.setLocation(null);
	},
	onHide: function() {
		
	}
};
</script>

<style lang="less">
@import url('account.less');
</style>
<style>
.form {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
}

.form-label {
  width: 120rpx;
  font-size: 28rpx;
  color: #333;
}

.form-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  color: #333;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  padding: 0 20rpx;
}

.btn-code {
  width: 200rpx;
  height: 60rpx;
  font-size: 26rpx;
  color: #fff;
  background-color: #007aff;
  border-radius: 5rpx;
  margin-left: 20rpx;
}

.btn-code[disabled] {
  background-color: #ccc;
}

.btn-confirm {
  width: 100%;
  height: 80rpx;
  font-size: 30rpx;
  color: #fff;
  background-color: #007aff;
  border-radius: 10rpx;
  margin-top: 20rpx;
}
</style>